<template>
    <div class="login-wrapper row">
        <div class="login column">
            <div class="title">用户登录</div>
            <van-image height="300rpx" width="300rpx" fit="cover" class="logo" round
                src="cloud://xinyuqian-5gvjlw4d0eabb09e.7869-xinyuqian-5gvjlw4d0eabb09e-1307420821/static/logo.png"></van-image>
            <ol class="list">
                <li>1. 您只需要登录一次。</li>
                <li>2. 我们只保存您的公开信息。</li>
                <li>3. 请您点击下面的按钮并确认授权。</li>
            </ol>
            <van-button class="confirm" type="primary" @click.native="getUserInfo" size="large">
                登录
            </van-button>
        </div>
    </div>
</template>

<script>
import Notify from "@/wxcomponents/weapp/dist/notify/notify";
import $store from "@/store/index.js";
export default {
    methods: {
        getUserInfo() {
            wx.getUserProfile({

                desc: "用于完善用户资料",
                success: ({ userInfo }) => {
                    Notify({
                        type: "success",
                        message: "获取信息成功，注册用户中",
                        selector: "#editor-notify",
                    });
                    console.log(userInfo);
                    $store
                        .dispatch("login", userInfo)
                        .then(() => {
                            Notify({
                                type: "success",
                                message: "注册用户成功，等待重启小程序",
                                selector: "#editor-notify",
                            });
                        })
                        .catch((err) => {
                            Notify({
                                type: "danger",
                                message: "注册用户失败，请重新尝试",
                                selector: "#editor-notify",
                            });
                        });
                },
            });
        },
    },
};
</script>

<style lang="less" scoped>
.login-wrapper {
    height: 100%;
    width: 100%;

    .login {
        background-color: #fff;
        height: 80%;
        width: 80%;
        border-radius: 8rpx;
        justify-content: space-evenly;

        .logo {
            box-shadow: 0 1px 39px #ebedf0;
            border-radius: 50%;
        }

        .title {
            font-size: 64rpx;
        }

        .list {
            margin: 16rpx;
        }

        .confirm {
            width: 80%;
        }
    }
}
</style>